<template>
  <div class="ddglym_box">
    <div class="ddgl ddglym">
      <a-table
        :pagination="$parent.pagination"
        :columns="columns"
        :dataSource="$parent.tabslist"
        class="components-table-demo-nested"
        @change="$parent.getddgl"
        :scroll="{ x: 2300}"
      >
        <a slot="operation" slot-scope="text,record,index" href="javascript:;">
          <!--  :disabled="record.SHBJB=='交易关闭'||record.SHBJB=='交易完成'?true:false" -->
          <a class="del" @click="ddcl(record)">订单处理</a>

          
          <a
            class="del"
            @click="tjdd(record,index)"
            v-if="record.ly!='云现货'"
            :disabled="record.SHBJB=='交易关闭'||record.SHBJB=='交易完成'?true:false"
          >添加</a>
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a class="del" @click="kpxx(record.dhrPHONE)">开票信息</a>
              </a-menu-item>
               <a-menu-item>
                <a class="del" @click="shdz(record.dhrPHONE)">收货地址</a>
              </a-menu-item>
               <a-menu-item>
          <a href="JavaScript:;" @click="print(record,index,'edit_ok')">打印</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a>
        <template slot-scope="text, record, keys" slot="expandedRowRender">
          <div class="div tab_ddxx">
            <!-- <div class="addchild"><a-button  type="primary" size="small">添加</a-button></div> -->
            <div class="ddxxlist ddxxhead">
              <span class="listspan xllistspan">型号</span>
              <span class="listspan">品牌</span>
              <span class="listspan">产地</span>
              <span class="listspan">库房</span>
              <span class="listspan" v-if="$store.state.bbl_sqdwid=='18775'">备注</span>
              <span class="listspan">数量</span>
              <span class="listspan">价格</span>
              <span class="listspan">重量</span>
              <span class="listspan">合计</span>
              <span class="listspan">操作</span>
            </div>
            <div class="ddxxlist dxbody" v-for="(item,i) in text.child" :key="i">
              <span class="listspan" :class="'xhval_'+i">
                <a-input
                  style="width:257px;"
                  @change="xhchange(i)"
                  v-model="item.XL"
                  :defaultValue="item.XL"
                />
              </span>
              <span class="listspan" :class="'ppval_'+i">
                <a-input
                  style="width:80px;"
                  @change="ppchange(i)"
                  v-model="item.SCCJC"
                  :defaultValue="item.SCCJC"
                />
              </span>
              <span class="listspan">{{item.sccd}}</span>
              <span class="listspan">{{item.kfmc}}</span>
              <span class="listspan" v-if="$store.state.bbl_sqdwid=='18775'">{{item.BEIZHU}}</span>

              <!-- <span class="listspan">x{{item.DHSL}}</span> -->
              <span class="listspan">
                x
                <a-input-number
                  v-model="item.DHSL"
                  :disabled="text.SHBJB=='交易关闭'||text.SHBJB=='交易完成'?true:false"
                  :min="1"
                  style="width:80px;"
                  :max="99999999999"
                  :step="1"
                  :precision="2"
                  class="input"
                  @change="DhslNumChange"
                />
              </span>
              <span class="listspan">
                <span>
                  <span class="orange">
                    ￥
                    <!-- <span :class="'moneyflg_'+item.key+'_1'" class="moneyinpu">{{item.HSJ}}</span> -->
                    <span :class="'moninpflg_'+item.key">
                      <a-input-number
                        v-model="item.HSJ"
                        :disabled="text.SHBJB=='交易关闭'||text.SHBJB=='交易完成'?true:false"
                        :class="'inpval_'+item.key"
                        :min="0"
                        style="width:80px;"
                        :max="99999999999"
                        :step="1"
                        :precision="2"
                        class="input"
                        @change="numChange"
                      />
                    </span>
                  </span>
                  /{{item.JLDW}}
                </span>
              </span>
              <span class="listspan">
                总重量：
                <span class="orange red">1</span>
              </span>
              <span class="listspan">
                小计：
                <span class="orange red">
                  ￥
                  <span :class="'hjmon_'+item.key">{{(item.HSJ*item.DHSL).toFixed(2)}}</span>
                </span>
              </span>

              <span class="listspan">
                <a-popconfirm
                  title="确定保存吗?"
                  class="del"
                  v-if="text.SHBJB=='交易关闭'||text.SHBJB=='交易完成'||text.ly=='云现货'?false:true"
                  style="color:#1890ff; cursor: pointer;"
                  @confirm="() =>text.SHBJB=='交易关闭'||text.SHBJB=='交易完成'?'':savesub(i,item.ID_NUM,item.HSJ,item.key,item.DHSL,item,keys)"
                >保存</a-popconfirm>
                <span
                  v-if="text.SHBJB=='交易关闭'||text.SHBJB=='交易完成'||text.ly=='云现货'?true:false"
                  style="color:#ccc; cursor: pointer;"
                >保存</span>
                <a-popconfirm
                  title="确定删除吗?"
                  v-if="text.SHBJB=='交易关闭'||text.SHBJB=='交易完成'||text.ly=='云现货'?false:true"
                  style="color:#1890ff; cursor: pointer;"
                  @confirm="() =>text.SHBJB=='交易关闭'||text.SHBJB=='交易完成'?'':deleter(item.ID_NUM)"
                >删除</a-popconfirm>
                <span
                  v-if="text.SHBJB=='交易关闭'||text.SHBJB=='交易完成'||text.ly=='云现货'?true:false"
                  style="color:#ccc; cursor: pointer; margin-left:10px;"
                >删除</span>
              </span>
            </div>
          </div>
        </template>
        <template slot-scope="text, record, index" slot="zje">
          <div>
            <div :class="'zje_'+index">{{text}}</div>
          </div>
        </template>
        <template slot-scope="text, record, index" slot="SHBJB">
          <div>
            <a-tag color="#f50" v-if="text=='待支付'">{{text}}</a-tag>
            <a-tag color="#90989e" v-if="text=='已退款'">{{text}}</a-tag>
            <a-tag color="#2db7f5" v-if="text=='已付款'">{{text}}</a-tag>
            <a-tag color="#87d068" v-if="text=='已发货'">{{text}}</a-tag>
            <a-tag color="#90989e" v-if="text=='交易关闭'">{{text}}</a-tag>
            <a-tag color="#d80000" v-if="text=='关闭订单'">{{text}}</a-tag>
            <a-tag color="#d6d011" v-if="text=='待发货'">{{text}}</a-tag>
            <a-tag color="#11c4d6" v-if="text=='交易完成'">{{text}}</a-tag>
          </div>
        </template>
        <template slot-scope="text, record, index" slot="YUNSHUDH">
          <div>
            <a @click="getysdh(text,index,record)">{{text}}</a>
          </div>
        </template>
      </a-table>
      <div class="gl_tjwz kpxx_tk" v-if="$store.state.kpxx">
        <kpxx class="gl_tjym"></kpxx>
      </div>
      <div class="gl_tjwz kpxx_tk" v-if="$store.state.shdz">
        <shdz class="gl_tjym"></shdz>
      </div>
      <div class="gl_tjwz kpxx_tk" v-if="ddclflag">
        <ddcltk></ddcltk>
      </div>

      <div v-if="ysdhflg" class="ysdh">
        <div class="ysdh_box">
          <span class="close" @click="close">
            <a-icon type="close" />
          </span>
          <ddkd></ddkd>
        </div>
      </div>
      <div class="print_box" v-if="print_flag">
        <print></print>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { setTimeout, setInterval } from "timers";
import kpxx from "../kpxx/kpxx.vue";
import shdz from "../shdz/shdz.vue";
import ddkd from "./ddkd.vue";
import print from "./print/print.vue";

// import { setTimeout } from 'timers';
const columns = [
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    width: 170
    // fixed:"left"
  },
  { title: "销售单编号", dataIndex: "SQDHDH", key: "SQDHDH" },
  {
    title: "订单状态",
    dataIndex: "SHBJB",
    key: "SHBJB",
    scopedSlots: { customRender: "SHBJB" }
  },
  { title: "公司名称", dataIndex: "dhdwmc", key: "dhdwmc" },
  { title: " 订货人", dataIndex: "DHR", key: "DHR" },

  { title: "总数量", dataIndex: "DHSL", key: "DHSL" },

  {
    title: "总金额",
    dataIndex: "zje",
    key: "zje",
    scopedSlots: { customRender: "zje" }
  },
  {
    title: "价格类型",
    dataIndex: "price_type",
    key: "price_type"
  },
  { title: "订购日期", dataIndex: "ZDRQ", key: "ZDRQ" },

  { title: "收款日期", dataIndex: "fkrq", key: "fkrq" },
  { title: "收款方式", dataIndex: "SKFS", key: "SKFS" },
  { title: "收款金额", dataIndex: "FPSL", key: "FPSL" },
  { title: "来源", dataIndex: "ly", key: "ly" },
  { title: "运输方式", dataIndex: "YUNSHUFS", key: "YUNSHUFS" },
  {
    title: "运单号",
    dataIndex: "YUNSHUDH",
    key: "YUNSHUDH",
    scopedSlots: { customRender: "YUNSHUDH" }
  },
  { title: "发货日期", dataIndex: "fhrq", key: "fhrq" },
  { title: "收货地址", dataIndex: "FHDZ", key: "FHDZ" },
  { title: "备注", dataIndex: "BEIZHU", key: "BEIZHU" }
];

const data = [];
const innerColumns = [
  { title: "型号", dataIndex: "XL", key: "XL" },
  { title: "品牌", dataIndex: "SCCJC", key: "SCCJC" },
  { title: "地址", dataIndex: "SZQY", key: "SZQY" },
  { title: "价格", dataIndex: "HSJ", key: "HSJ" },
  { title: "数量", dataIndex: "DHSL", key: "DHSL" },
  { title: "合计", dataIndex: "hj", key: "hj" }
];

const innerData = [];

import "../../js/jquery.js";
import ddcltk from "./ddcltk.vue";

export default {
  inject: ["reload"],

  data() {
    return {
      sele: "",
      serchvalue: "",
      tabslist: [],
      ddgb: "交易关闭",
      yfk: "已付款",
      yfh: "已发货",

      data,
      columns,
      innerColumns,
      innerData,
      kpxxphone: "",
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      xh: "",
      pp: "",
      ddclflag: false,
      ddclval: [],
      djmoney: 0,
      djnum: 0,
      ysdhflg: false,
      //获取物流运单号:
      // ydh: "",
      //获取物流公司编码:
      // wlbm: "",
      wuldata: "",
      tjddflag: false,
      tjddval: "",
      dfhymflag: true,
      allmoney: 0,
      print_data: "",
      print_flag: false
    };
  },
  components: {
    kpxx,
    shdz,
    ddcltk,
    ddkd,
    print
  },
  methods: {
    ddztsub(value, sqdwid) {
      this.axios
        .post(
          "order/setOrderState.php",
          qs.stringify({
            SQDHDH: sqdwid,
            shbjb: value
          })
        )
        .then(res => {
          console.log(res);

          this.$parent.getddgl();
        });
    },
    ddcl(value) {
      this.ddclval = value;
      console.log(value);
      this.ddclflag = true;
    },
    tjdd(value, index) {
      //向该条订单中push一条明细
      this.tjddval = value;
      var addarr = {
        DHSL: "",
        HSJ: "",
        SCCJC: "",
        XL: "",
        ID_NUM: "0_" + this.$parent.tabslist[index].child[0].ID_NUM,
        SZQY: this.$parent.tabslist[index].child[0].SZQY
      };
      this.$parent.tabslist[index].child.push(addarr);
    },
    //开票信息
    kpxx(value) {
      console.log(value);
      this.kpxxphone = value;
      this.$store.state.kpxx = true;
    },
    //收货地址
    shdz(value) {
      console.log(value);
      this.kpxxphone = value;
      this.$store.state.shdz = true;
    },
    //修改
    // childedit(value, index) {
    //   console.log(value, "-------------", index);
    //   $(".moneyflg_" + index).hide(); //修改按钮隐藏
    //   $(".moneyflg_" + index + "_1").hide(); //表格价格隐藏

    //   $(".moninpflg_" + index).show(); //保存按钮显示
    // },

    // 子集型号品牌-输入框值
    xhchange(i) {
      console.log(i);
      this.xh = $(".xhval_" + i)
        .children("input")
        .val();
    },
    ppchange(i) {
      console.log(i);
      this.pp = $(".ppval_" + i)
        .children("input")
        .val();
    },
    // 子集型号品牌-输入框值

    //保存
    savesub(i, id_num, price, index, num, value, key) {
      this.xhchange(i);
      this.ppchange(i);
      this.djmoney = this.djmoney == 0 ? price : this.djmoney;
      this.djnum = this.djnum == 0 ? num : this.djnum;
      this.allmoney = 0;

      // console.log(price);
      // console.log(num);
      // console.log(this.djmoney);
      // console.log(this.djnum);
      // return false;

      if (this.djmoney != 0) {
        this.axios
          .post(
            "order/modifyOrderPrice.php",
            qs.stringify({
              id_num: id_num,
              price: value.HSJ,
              num: value.DHSL,
              xh: value.XL,
              sccjc: value.SCCJC
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              //重新设置的单价 X 合计总额的价格
              //let hjmoney = hjmon * this.djmoney == 0 ? value.HSJ : this.djmoney * hjmon;
              let hjmoney =
                value.DHSL * value.HSJ == 0 ? 0 : value.HSJ * value.DHSL;
              var keys = value.keys;

              for (
                var i = 0;
                i < this.$parent.tabslist[keys].child.length;
                i++
              ) {
                this.allmoney +=
                  this.$parent.tabslist[keys].child[i].HSJ *
                  this.$parent.tabslist[keys].child[i].DHSL;
              }
              $(".zje_" + keys).text(this.allmoney.toFixed(2));

              //重新设置合计总额的价格
              $(".hjmon_" + index).text(hjmoney.toFixed(2));

              console.log("vvvvvvvvvvvvvvvvvvvvv", this.$parent.pagination);
              // this.$parent.getddgl(
              //   this.$parent.pagination,
              //   this.$parent.serchvalue,
              //   this.$parent.tabskey
              // );
              //价格和数量制空
              this.djmoney = 0;
              this.djnum = 0;
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        this.$notification["error"]({
          message: "失败",
          description: "单价不能小于0元"
        });
      }
    },
    // inpuche(value, index, hjmon){
    //   this.savesub(value, index, hjmon)
    // },
    //取消
    quxiao(value, index, hjmon) {
      this.djmoney = value.HSJ;
      this.$parent.getddgl(this.$parent.pagination);
    },
    //价格改变
    numChange(value) {
      console.log("changed", value);
      this.djmoney = value;
    },

    //获取数量改变
    DhslNumChange(value) {
      //console.log(value);
      this.djnum = value;
    },
    getysdh(YDH, index, value) {
      console.log(YDH, index);
      console.log(value);
      this.ysdhflg = true;
      //console.log(YDH)
      //获取快递公司编码
      var mailCode = this.$parent.tabslist[index].YUNSHUFSBM;
      // this.ydh = YDH;
      // this.wlbm = mailCode;
      this.wuldata = value;
    },
    //打印
    print(item, index) {
      console.log(item);
      this.print_data = item;
      this.print_flag = true;
      // this.axios
      //   .post(
      //     this.$store.state.baseurl + "/wxapi/smt_bjdeditselect.php",
      //     qs.stringify({
      //       token: sessionStorage.getItem("smt_token"),
      //       bjdh: item.bjdh
      //     })
      //   )
      //   .then(res => {
      //     console.log(res);
      //     if (res.data.code == 103) {
      //       this.print_data = res.data.result;
      //       this.print_data.listdata = item;
      //       console.log(this.print_data);
      //     }
      //   });
    },
    deleter(id_num) {
      this.axios
        .post(
          "order/deleteOrderPrice.php",
          qs.stringify({
            id_num: id_num
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.$parent.getddgl(
              this.$parent.pagination,
              this.$parent.serchvalue,
              this.$parent.tabskey
            );
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    close() {
      this.ysdhflg = false;
    }
  },

  created() {}
};
</script>

<style lang='less'>
.ddglym_box {
  .ddgl {
    width: 98%;
    position: relative;
    top: 10px;
    left: 1%;
    background-color: #fff !important;
    height: auto;
    padding: 5px 20px;
    .ant-table-row-expand-icon-cell {
      width: auto !important;
    }
    th,
    td {
      font-size: 12px;
    }
    .del {
      padding-right: 10px;
      margin: 0;
    }
    .ysdh {
      position: fixed;
      width: 100%;
      height: 1000px;
      z-index: 999;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      .ysdh_box {
        width: 700px;
        height: 500px;
        background: #fff;
        /*position: absolute;
    top: 21%;
    left: 32%;*/
        position: relative;
        margin: 0 auto;
        top: 10%;
        overflow: auto;
        .close {
          position: absolute;
          right: 0;
        }
      }
    }

    .gl_tjwz {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      height: 930px;
      .gl_tjym {
        position: absolute;
        width: 80%;
        top: 200px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
      }
    }
    .ant-table-body {
      background: #fff;
    }
    .ant-table-wrapper {
      margin: 0 !important;
    }

    .ddxxhead {
      border-bottom: 1px solid #ccc;
      .listspan {
        // color: #bababa;
      }
    }

    .ddxxlist {
      display: flex;
      justify-content: space-between;
      width: 70%;
      padding: 10px;
      .listspan {
        // display: flex;
        // justify-content: space-between;
        // width: 20%;
        display: inline-block;
        .anticon svg {
          font-size: 18px;
        }
      }
      .xllistspan {
        width: 478px !important;
      }
      .rightspan {
        width: 10%;
        text-align: right;
      }
      span {
        button {
          margin: 0 10px;
        }
        .button {
          background-color: #1890ff;
          border: 0 !important;
        }
      }
      .orange {
        color: red;
        .input {
          outline: none;
          border: 0;
          border: 1px solid #ccc;
          border-radius: 5px;
          padding: 3px 8px;
        }
      }
      .red {
        font-size: 14px;
      }
    }

    ul {
      margin: 0 auto;
      height: auto;
     
      li {
        margin: 10px 0;
        // border-bottom: 1px solid #ccc;
        background: #fff;
        .colosedd {
          color: #fff;
          background-color: #999 !important;
          border: 0 !important;
        }

        .size {
          font-size: 14px;
          font-weight: bold;
          color: #666;
        }
        .ddxx {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          background-color: #c5c790;
          color: #fff;
          // border-bottom: 1px solid #ccc;

          span {
            margin-right: 20px;
            color: #fff;
          }
        }

        .dxbody {
          //  border-bottom:1px solid #e9e6e6;
        }

        .ddxxfot {
          text-align: left;
          background-color: #f1f1f1;
          padding: 5px 10px;
          position: relative;
          font-size: 14px;
          color: #999;
          top: 42px;
          border-top: 1px solid #ccc;
          span {
            line-height: 25px;
          }
        }
      }
      .fot_tit {
        margin-right: 0px !important;
        color: #000;
      }
    }
      @media (max-width:1400px) {
          ul{
            overflow-y: scroll;
            height: 300px;
          }
          
        }
    // ul:last-child {
    //   border-bottom: 1px solid #ccc;
    // }
    tbody tr td {
      padding: 10px !important;
    }
    @media (max-width: 1800px) {
      .tab_ddxx {
        width: 56%;
        .ddxxlist {
          width: 100%;
          .ant-input-number-input {
            padding: 0 5px;
          }

          .input {
            padding: 3px 0;
          }
        }
      }
    }
  }
}
</style>
